@charset "utf-8";

/*----------------------------- 境内案内領域の設定 -----------------------------*/
/*////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width:850px) { /*breake point = No.1*/
    /*-----850px以上のレイアウト調整用 ---------------------------------------------*/
    .event-specific-area {
      display: block; 
      width: 800px;
      padding: 5px 5px;
      margin: 10px auto;
      /*border: 1.5px solid #ffae00;*/
      }
    .event-specific-section-area-1 { 
      width: 780px;
      padding: auto;
      margin: 10px auto 10px;
      /*border: 1.5px solid #ff0000;*/
      }
      .event-specific-section-area-2 { 
      width: 700px;
      padding: 0px 5px 5px;
      margin: 10px auto 10px;
      float: left;
      }
    .event-specific-box {
      position: relative;
      width: 750px;
      margin: auto;
      /*border: 1.5px solid #fffb00;*/
    }
    .box-overlay::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);/*センター寄せの修正*/
      width: 95%;
      height: 95%;
      margin: auto;
      background-color: #31313169;
      /*border: 1.5px solid #09ff00;*/
    }
    /*境内画像（メイン）*/
    .event-specific-img-1 {
      display: block;
      width: 100%;
      height: auto;
      margin: 10px auto;
      /*border: 1.5px solid #00ffff;*/
      }
    /*境内各所タイトルの設定*/
    .event-specific-title {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);/*センター寄せの修正*/
      z-index: 2;
      /*border: 1.5px solid #0044ff;*/
      margin: auto;
      }
    .event-specific-title h3{
      width: 90%;
      font-size: 20px;
      color: #ffffff;
      border-bottom: 1.5px solid #ffffff;
      text-align: center;
      }
      /*境内各別タイトルの設定*/
    .event-specific-title-part {
      width: 100%;
      /*border: 1.5px solid #0044ff;*/
      margin: auto;
      }
    .event-specific-title-part h3{
      font-size: 20px;
      color: #313131;
      width: 350px;
      padding: 5px 20px;
      padding-bottom: 0px;
      border-bottom: 1.5px solid #e1e0e4;
      margin: 20px auto 10px;
      text-align: center;
      }
    .event-specific-text {
      font-size: 16px;
      line-height: 170%;
      text-align: center;
      margin: 10px auto 10px;
    }
    .event-specific-text h3{
      font-size: 18px;
      width: 350px;
      padding: 5px 20px;
      padding-bottom: 0px;
      margin: 20px auto 5px;
      text-align: center;
      }
    .event-specific-text ul{
      list-style-type: none; /*リストの「・」マークの消去*/
      padding-left: 0px;/*リストの「・」部分の余白の消去*/
      display: inline-block;
      /*flex-direction: column;
      justify-content: flex-start;*/
      width: 50%;
      margin: auto;
      /*border: 0.5px solid rgb(255, 0, 0);-----確認用*/
    }
    .event-specific-text li{
      display: block;
      width: 70%; /*リスト枠の幅*/
      text-align: left;
      margin: auto;
      /*border: 0.5px solid rgb(208, 255, 0); -----確認用*/
    }
    .event-specific-text-2 {
      font-size: 16px;
      line-height: 170%;
      text-align: center;
      margin: 10px auto 10px;
    }
     .event-specific-text-2 ul{
      list-style-type: none; /*リストの「・」マークの消去*/
      padding-left: 0px;/*リストの「・」部分の余白の消去*/
      display: inline-block;
      /*flex-direction: column;
      justify-content: flex-start;*/
      width: 50%;
      margin: auto;
      /*border: 0.5px solid rgb(0, 255, 242);-----確認用*/
    }
    .event-specific-text-2 li{
      display: block;
      width: 100%; /*リスト枠の幅*/
      text-align: left;
      margin: auto;
      /*border: 0.5px solid rgb(0, 255, 13); -----確認用*/
    }
    .button-Icon-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 30px;
      margin: auto;
      border-top: 1.5px solid #e1e0e4;
      border-bottom: 1.5px solid #e1e0e4;
      }
    .button-Icon-back a {
      display: block;
      padding: 10px auto;
      text-decoration: none;
      }
    .button-Icon-back:hover {
      transition: 1.5s; 
      border-top: 1.7px solid #afaeb1;
      border-bottom: 1.7px solid #afaeb1;
      }
    .button-Icon-back span {
      display: block;
      font-size: 16px;
      color:#000000;
      text-align: center;
      margin: auto;
      /* border: 0.5px solid #00eeff;-----確認用*/  
    }
    /*境内画像（サブ）*/
    .event-specific-img-2 {
      width: 250px;
      height: auto;
      margin: 15px auto 10px;
      }
    
     /*フロートの解除*/
    .cleat {
      clear: both;
      }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
      }
    }


/*-----849px以下のレイアウト調整用 ----------------------------------------------*/
@media screen and (max-width:849px) { /*breake point = No.2*/
    .event-specific-area {
      display: block; 
      width: 94%; /*800/850*/
      padding: 0.5%;
      margin: 1.1% auto;
      /*border: 1.5px solid #ffae00;*/
      }
    .event-specific-section-area-1 { 
      width: 97.5%; /*780/800*/
      padding: auto;
      margin: 1.2% auto;
      /*border: 1.5px solid #ff0000;*/
      }
     /*.event-specific-section-area-2 { 
      width: 700px;
      padding: 0px 5px 5px;
      margin: 10px auto 10px;
      float: left;
      }*/
    .event-specific-box {
      position: relative;
      width: 96.1%; /*750/780*/
      margin: auto;
      /*border: 1.5px solid #cc00ff;*/
    }
    .box-overlay::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);/*センター寄せの修正*/
      width: 95%;
      height: 95%;
      margin: auto;
      background-color: #31313169;
      /*border: 1.5px solid #09ff00;*/
    }
    /*境内画像（メイン）*/
    .event-specific-img-1 {
      display: block;
      width: 100%;
      height: auto;
      margin: 10px auto;
      /*border: 1.5px solid #00ffff;*/
      }
    /*境内各所タイトルの設定*/
    .event-specific-title {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      width: 100%;/*780px*/
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);/*センター寄せの修正*/
      z-index: 2;
      /*border: 1.5px solid #0044ff;*/
      margin: auto;
      }
    .event-specific-title h3{
      width: 90%;
      font-size: 20px;
      color: #ffffff;
      border-bottom: 1.5px solid #ffffff;
      text-align: center;
      }
      /*境内各別タイトルの設定*/
    .event-specific-title-part {
      width: 100%;
      margin: auto; 
      /*border: 1.5px solid #0044ff;*/
      }
    .event-specific-title-part h3{
      font-size: 20px;
      color: #313131;
      width: 44.8%;/*350/780*/
      padding: 0.6% 2.5%;
      padding-bottom: 0px;
      border-bottom: 1.5px solid #e1e0e4;
      margin: 2.5% auto 1.2%;
      text-align: center;
      }
    .event-specific-text {
      font-size: 16px;
      line-height: 170%;
      text-align: center;
      margin: 1.2% auto; /*10/780*/
      /*border: 1.5px solid #00e1ff;*/
    }
     .event-specific-text h3{
      font-size: 18px;
     width: 44.8%;/*350/780*/
      padding: 0.6% 2.5%;
      padding-bottom: 0px;
      margin: 2.5% auto 1.2%;
      text-align: center;
      }

    .event-specific-text ul{
      list-style-type: none; /*リストの「・」マークの消去*/
      padding-left: 0px;/*リストの「・」部分の余白の消去*/
      display: inline-block;
      /*flex-direction: column;
      justify-content: flex-start;*/
      width: 50%;
      margin: auto;
      /*border: 0.5px solid rgb(255, 0, 0);-----確認用*/
    }
    .event-specific-text li{
      display: block;
      width: 90%; /*リスト枠の幅*/
      text-align: left;
      margin: auto;
      /*border: 0.5px solid rgb(0, 255, 13); -----確認用*/
    }
    .event-specific-text-2 {
      font-size: 16px;
      line-height: 170%;
      text-align: center;
      margin: 10px auto 10px;
    }
     .event-specific-text-2 ul{
      list-style-type: none; /*リストの「・」マークの消去*/
      padding-left: 0px;/*リストの「・」部分の余白の消去*/
      display: inline-block;
      /*flex-direction: column;
      justify-content: flex-start;*/
      width: 70%;
      margin: auto;
      /*border: 0.5px solid rgb(0, 255, 242);-----確認用*/
    }
    .event-specific-text-2 li{
      display: block;
      width: 100%; /*リスト枠の幅*/
      text-align: left;
      margin: auto;
      /*border: 0.5px solid rgb(0, 255, 13); -----確認用*/
    }
    .button-Icon-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12.8%; /*100/780*/
      aspect-ratio: 10/3; /*height: 30px*/
      margin: auto;
      border-top: 1.5px solid #e1e0e4;
      border-bottom: 1.5px solid #e1e0e4;
      }
    .button-Icon-back a {
      display: block;
      padding: 10% auto;
      text-decoration: none;
      /*border: 1.5px solid #eeff00;*/
      }
    .button-Icon-back span {
      font-size: 16px;
    }
    .button-Icon-back:hover {
      transition: 1.5s; 
      border-top: 1.7px solid #afaeb1;
      border-bottom: 1.7px solid #afaeb1;
      }
    .button-Icon-back span {
      display: block;
      color:#000000;
      text-align: center;
      margin: auto;
      /* border: 0.5px solid #00eeff;-----確認用*/  
    }
    /*境内画像（サブ）*/
    .event-specific-img-2 {
      width: 250px;
      height: auto;
      margin: 15px auto 10px;
      }
     /*フロートの解除*/
    .cleat {
      clear: both;
      }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
      }
    }

    
/*-----549px以下のレイアウト調整用 ----------------------------------------------*/
@media screen and (max-width:549px) { /*breake point = No.3*/
    .event-specific-title h3{
      width: 90%;
      font-size: 3.2vw; /* ← viewport = 550pxに対してfontsize = 16px*/
      color: #ffffff;
      border-bottom: 1.5px solid #ffffff;
      text-align: center;
      }
    .event-specific-title-part h3{
      font-size: 3.2vw; /* ← viewport = 550pxに対してfontsize = 16px*/
      color: #313131;
      width: 44.8%;/*350/780*/
      padding: 0.6% 2.5%;
      padding-bottom: 0px;
      border-bottom: 1.5px solid #e1e0e4;
      margin: 2.5% auto 1.2%;
      text-align: center;
      }
    .event-specific-text {
      font-size: 2.7vw; /* ← viewport = 550pxに対してfontsize = 14px*/
      line-height: 170%;
      text-align: center;
      margin: 1.2% auto; /*10/780*/
      /*border: 1.5px solid #00e1ff;*/
    }
    .event-specific-text h3{
      font-size: 2.7vw;
      width: 44.8%;/*350/780*/
      padding: 0.6% 2.5%;
      padding-bottom: 0px;
      margin: 2.5% auto 1.2%;
      text-align: center;
      }
   .event-specific-text ul{
      list-style-type: none; /*リストの「・」マークの消去*/
      padding-left: 0px;/*リストの「・」部分の余白の消去*/
      display: inline-block;
      /*flex-direction: column;
      justify-content: flex-start;*/
      width: 70%;
      margin: auto;
      /*border: 0.5px solid rgb(255, 0, 0);-----確認用*/
    }
    .event-specific-text li{
      display: block;
      width: 80%; /*リスト枠の幅*/
      text-align: left;
      margin: auto;
      /*border: 0.5px solid rgb(0, 255, 13); -----確認用*/
    }
  .event-specific-text-2 {
      font-size: 2.7vw;
      line-height: 170%;
      text-align: center;
      margin: 10px auto 10px;
    }
     .event-specific-text-2 ul{
      list-style-type: none; /*リストの「・」マークの消去*/
      padding-left: 0px;/*リストの「・」部分の余白の消去*/
      display: inline-block;
      /*flex-direction: column;
      justify-content: flex-start;*/
      width: 70%;
      margin: auto;
      /*border: 0.5px solid rgb(0, 255, 242);-----確認用*/
    }
    .event-specific-text-2 li{
      display: block;
      width: 100%; /*リスト枠の幅*/
      text-align: left;
      margin: auto;
      /*border: 0.5px solid rgb(0, 255, 13); -----確認用*/
    }
    .button-Icon-back span {
      font-size: 2.7vw;
    }
  }